<template>
  <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
</template>

<script>
  export default {
    data() {
      return {
        statusBarHeight: 0
      };
    },
    mounted() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight;
    }
  };
</script>

<style>
  .status-bar {
    /* 使用状态栏高度的CSS变量 */
    height: var(--status-bar-height);
    width: 100%;
    /* 可以根据需要设置背景颜色 */
    background-color: rgba(0, 0, 0, 0);
  }
</style>
